<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>数据分析</title>
	<style>
		.button {
			text-align: right;
		}
		#title{
			width: 100%;
			height: 20px;
			text-align: center;
			font-size: 30px;
			font-family: 'Courier New', Courier, monospace;
			color: #3399ff;
		}
	</style>
</head>

<script src="../eacharts/echarts.js"></script>

<body bgcolor="black">
	<div id="title">
		<span >进货出货数据分析</span>
	</div>
	
	<div class="button">
		<button onclick="changecolor(1)">暗色 </button>
		<button onclick="changecolor(2)">粉彩 </button>
		<button onclick="changecolor(3)">蓝湖 </button>
		<button onclick="changecolor(4)">万圣 </button>
		<button onclick="changecolor(5)">紫色 </button>
	</div>
	<div>
		<div id="bt1" style="width: 300px; height: 380px;float: left;"></div>
		<div id="bt2" style="width: 300px; height: 380px; float: left;"></div>
		<div id="bt3" style="width: 550px; height: 380px; float: left;"></div>
		<div id="bt4" style="width: 350px; height: 380px; float: left;"></div>
		<div id="bt5" style="width: 350px; height: 380px; float: left;"></div>
		<div id="bt6" style="width: 330px; height: 400px; float: left;"></div>
		<div id="bt7" style="width: 600px; height: 380px; float: left;"></div>
		<div id="bt8" style="width: 500px; height: 380px; float: left;"></div>
		<div id="bt9" style="width: 600px; height: 380px; float: left;"></div>
	</div>





</body>

<script>
	/* 图表的命名 */
	var bt1Charts, bt1option, bt2Charts, bt2option, bt3Charts, bt3option, tbcolor;
	var bt4Charts, bt4option, bt5Charts, bt5option;
	var bt6Charts, bt6option, bt7Charts, bt7option;
	var bt8Charts, bt8option, bt9Charts, bt9option;
	var tbcolor = [
		"#dd6b66",
		"#759aa0",
		"#e69d87",
		"#8dc1a9",
		"#ea7e53",
		"#eedd78",
		"#73a373",
		"#73b9bc",
		"#7289ab",
		"#91ca8c",
		"#f49f42"
	];

	/* 页面加载时，初始化图表 */
	window.onload = function () {
		initCharts();
	}

	/*初始化图表*/
	function initCharts() {
		// 1、声明div，初始化图表
		bt1Charts = echarts.init(document.getElementById("bt1"));
		bt2Charts = echarts.init(document.getElementById("bt2"));
		bt3Charts = echarts.init(document.getElementById("bt3"));
		bt4Charts = echarts.init(document.getElementById("bt4"));
		bt5Charts = echarts.init(document.getElementById("bt5"));
		bt6Charts = echarts.init(document.getElementById("bt6"));
		bt7Charts = echarts.init(document.getElementById("bt7"));
		bt8Charts = echarts.init(document.getElementById("bt8"));
		bt9Charts = echarts.init(document.getElementById("bt9"));
		showCharts();


	}

	function showCharts() {
		bt1Charts.setOption(bt1option);
		bt2Charts.setOption(bt2option);
		bt3Charts.setOption(bt3option);
		bt4Charts.setOption(bt4option);
		bt5Charts.setOption(bt5option);
		bt6Charts.setOption(bt6option);
		bt7Charts.setOption(bt7option);
		bt8Charts.setOption(bt8option);
		bt9Charts.setOption(bt9option);

	}

	function changecolor(num) {
		if (num == 1) {
			tbcolor = [
				"#dd6b66",
				"#759aa0",
				"#e69d87",
				"#8dc1a9",
				"#ea7e53",
				"#eedd78",
				"#73a373",
				"#73b9bc",
				"#7289ab",
				"#91ca8c",
				"#f49f42"
			];
		}
		if (num == 2) {
			tbcolor = ["#fc97af",
				"#87f7cf",
				"#f7f494",
				"#72ccff",
				"#f7c5a0",
				"#d4a4eb",
				"#d2f5a6",
				"#76f2f2"
			];
		}
		if (num == 3) {
			tbcolor = [
				"#3fb1e3",
				"#6be6c1",
				"#626c91",
				"#a0a7e6",
				"#c4ebad",
				"#96dee8"
			];
		}
		if (num == 4) {
			tbcolor = [
				"#ff715e",
				"#ffaf51",
				"#ffee51",
				"#8c6ac4",
				"#715c87"
			];
		}
		if (num == 5) {
			tbcolor = [
				"#9b8bba",
				"#e098c7",
				"#8fd3e8",
				"#71669e",
				"#cc70af",
				"#7cb4cc"
			];

		}
		bt1option.color = tbcolor;
		bt2option.color = tbcolor;
		bt3option.color = tbcolor;
		bt4option.color = tbcolor;
		bt5option.color = tbcolor;
		bt6option.color = tbcolor;
		bt7option.color = tbcolor;
		bt8option.color = tbcolor;
		bt9option.color = tbcolor;
		showCharts();
	}
</script>
<script src="../eacharts/option.js"></script>

</html>